<template>
    <div class="settings">
        <div class="header">
            <van-nav-bar
                :title="$route.meta.title"
                left-arrow
                :right-text="$route.meta.subBtn?$route.meta.subBtn:''"
                @click-left="onClickLeft"
                @click-right="onClickRight"
            />
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name:'Settings',
    setup() {
        const onClickLeft = () => history.back();
        const onClickRight = () => {}
        return {
            onClickLeft,
            onClickRight
        };
    },
    components:{
        
    }
}
</script>

<style>
:root{
    --van-border-width: 0;
    --van-nav-bar-height:50px;
}
.settings{
    position: relative;
    background: #f5f5f5;
    width: 100%;
    height: 100vh;
}
.settings .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.settings .main{
    width: 100%;
    height: 100%;
}
.settings .van-nav-bar{height: 50px;}
.settings .van-nav-bar .van-icon{color: #000;}
.settings .van-nav-bar .van-nav-bar__arrow{font-size: 25px;}
.settings .van-nav-bar .van-nav-bar__title{
    font-size: 18px;
    font-weight: 500;
}
.settings .van-nav-bar .van-nav-bar__right span{color: #000;}

.settings .van-cell-group{margin-top: 10px;}
.settings .van-cell-group .van-cell{align-items: center;justify-content: space-between;}
.settings .van-cell-group .van-cell:after{left: 0;right: 0;}
.settings .van-cell-group .van-cell .van-cell__value span{font-size: 0.75rem;}
.settings .van-cell-group .van-cell .van-cell__right-icon{font-size: 12px;}
.settings .van-cell-group .van-cell .user{
    display: flex;
    align-items: center;
}
.settings .van-cell-group .van-cell .user .avatar{
    margin-right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: url('@/assets/img/avatar.png') center no-repeat;
    background-size: cover;
}
.settings .van-cell-group .van-cell .user .avatar img{width: 100%;height: 100%;}
.settings .van-cell-group .van-cell .user .info{
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.settings .van-cell-group .van-cell .user .info .title{line-height: 1.5;}
.settings .van-cell-group .van-cell .user .info .label{font-size: 0.625rem;color: #aaa;}
.settings .van-row.logout{
    margin-top: 10px;
    padding: 15px 0;
    background: #fff;
    text-align: center;
    font-size: 14px;
}
</style>